<template>
  <div style="padding-bottom: 10px">
    <el-card>
      <el-row :gutter="20">
        <el-col :sm="24" :lg="12" style="padding-left: 20px">
          <h2 >焊热质量管理系统框架</h2 >
          <el-collapse @change="handleChange">
            <el-collapse-item title="分布式集群" name="1">
              <div>* 前端开发框架 Vue、Element UI</div>
              <div>* 后端开发框架 Spring Boot</div>
              <div>* 容器框架 Undertow 基于 XNIO 的高性能容器</div>
              <div>* 权限认证框架 Sa-Token、Jwt 支持多终端认证系统</div>
              <div>* 关系数据库 MySQL 适配 8.X 最低 5.7</div>
              <div>* 关系数据库 Oracle 适配 11g 12c</div>
              <div>* 关系数据库 PostgreSQL 适配 13 14</div>
              <div>* 关系数据库 SQLServer 适配 2017 2019</div>
              <div>* 缓存数据库 Redis 适配 6.X 最低 4.X</div>
              <div>* 数据库框架 Mybatis-Plus 快速 CRUD 增加开发效率</div>
              <div>* 数据库框架 p6spy 更强劲的 SQL 分析</div>
              <div>* 多数据源框架 dynamic-datasource 支持主从与多种类数据库异构</div>
              <div>* 序列化框架 Jackson 统一使用 jackson 高效可靠</div>
              <div>* Redis客户端 Redisson 性能强劲、API丰富</div>
              <div>* 分布式锁 Lock4j 注解锁、工具锁 多种多样</div>
              <div>* 分布式幂等 Redisson 拦截重复提交</div>
              <div>* 分布式链路追踪 SkyWalking 支持链路追踪、网格分析、度量聚合、可视化</div>
              <div>* 分布式任务调度 Xxl-Job 高性能 高可靠 易扩展</div>
              <div>* 分布式文件存储 Minio 本地存储</div>
              <div>* 分布式云存储 七牛、阿里、腾讯 云存储</div>
              <div>* 监控框架 SpringBoot-Admin 全方位服务监控</div>
              <div>* 校验框架 Validation 增强接口安全性 严谨性</div>
              <div>* Excel框架 Alibaba EasyExcel 性能优异 扩展性强</div>
              <div>* 文档框架 SpringDoc、javadoc 无注解零入侵基于java注释</div>
              <div>* 工具类框架 Hutool、Lombok 减少代码冗余 增加安全性</div>
              <div>* 代码生成器 适配MP、SpringDoc规范化代码 一键生成前后端代码</div>
              <div>* 部署方式 Docker 容器编排 一键部署业务集群</div>
              <div>* 国际化 SpringMessage Spring标准国际化方案</div>
            </el-collapse-item>
          </el-collapse>
          <p>
            <b>当前版本:</b> <span>v{{ version }}</span>
          </p>
        </el-col>

        <el-col :sm="24" :lg="12" style="padding-left: 50px">
          <el-row>
            <el-col :span="12">
              <h2>技术选型</h2>
            </el-col>
          </el-row>
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-row>
              <el-col :span="6">
                <el-collapse-item title="后端技术" name="2">
                  <li>SpringBoot</li>
                  <li>Sa-Token</li>
                  <li>JWT</li>
                  <li>MyBatis</li>
                  <li>Druid</li>
                  <li>Jackson</li>
                  <li>Flowable</li>
                </el-collapse-item>
              </el-col>
              <el-col :span="6">
                <el-collapse-item title="前端技术" name="3">
                  <li>Vue</li>
                  <li>Vuex</li>
                  <li>Element-ui</li>
                  <li>Axios</li>
                  <li>Sass</li>
                  <li>Quill</li>
                  <li>Bpmn</li>
                </el-collapse-item>
              </el-col>
              <el-col :span="6">
                <el-collapse-item title="服务器" name="4">
                  <li>Centos</li>
                  <li>Java</li>
                  <li>MySql</li>
                  <li>Nginx</li>
                  <li>PHP</li>
                  <li>Redis</li>
                  <li>Minio</li>
                </el-collapse-item>
              </el-col>
            </el-row>
          </el-collapse>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'statement',
  data(){
    return{
      // 版本号
      version: "0.8.3",
      activeNames: ['1']
    }
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
    handleChange(val) {
      console.log(val);
    },
  },
}
</script>

<style scoped>

::v-deep .el-collapse-item__header{
  font-size: 18px;
}

.home {
blockquote {
  padding: 10px 20px;
  margin: 0 0 20px;
  font-size: 17.5px;
  border-left: 5px solid #eee;
}
hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
}
.col-item {
  margin-bottom: 20px;
}

ul {
  padding: 0;
  margin: 0;
}

font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
color: #676a6c;
overflow-x: hidden;

ul {
  list-style-type: none;
}

h4 {
  margin-top: 0;
}

h2 {
  margin-top: 10px;
  font-size: 26px;
  font-weight: 100;
}

p {
  margin-top: 10px;

b {
  font-weight: 700;
}
}

.update-log {
ol {
  display: block;
  list-style-type: decimal;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-inline-start: 40px;
}
}
}
</style>
